<template>
  <div class="home h100">
    <div ref="brand" class="brand">
      <!-- 加id是为了能够操作dom -->
      <div v-for="(value, key) in brand" :id="key" :key="key">
        <h5>
          {{ key }}
        </h5>
        <ul class="oul">
          <li
            v-for="(item, index) in value"
            @click="showPopUp(item.MasterID)"
            :key="index"
          >
            <div class="left">
              <img v-lazy="item.CoverPhoto" alt="" />
            </div>
            <div class="right">
              {{ item.Name }}
            </div>
          </li>
        </ul>
      </div>
      <NavLetters
        :letters="letters"
        @setIndex="(newIndex) => (index = newIndex)"
      />
      <!-- .prevent阻止默认事件 -->
      <transition name="move">
        <Popup v-if="flag" @setFlag="(newFlag) => (flag = newFlag)">
          <div v-for="item in brandCars" :key="item.groupId">
            <h5>
              {{ item.GroupName }}
            </h5>
            <ul class="oul">
              <li
                v-for="car in item.GroupList"
                @click="$router.push(`/detail/${car.SerialID}`)"
                :key="car.SerialID"
              >
                <div class="left w90">
                  <img class="w90 h60" v-lazy="car.Picture" alt="" />
                </div>
                <div class="right">
                  <h4>
                    {{ car.AliasName }}
                  </h4>
                  <p style="color: red">
                    {{ car.DealerPrice }}
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </Popup>
      </transition>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import NavLetters from "@/components/Home/NavLetters.vue";
import Popup from "@/components/Home/Popup.vue";
export default {
  name: "App",
  components: {
    NavLetters,
    Popup,
  },
  data() {
    return {
      index: -1,
      flag: false,
      MasterID: "",
    };
  },
  mounted() {
    // this.$store.dispatch("CarList/init")
    this.init();
  },
  watch: {
    index(newVal) {
      //一旦index值发生改变，改变index的下拉距离
      if (this.index !== -1) {
        this.$refs.brand.scrollTop = document.getElementById(
          this.letters[newVal]
        ).offsetTop;
      }
    },
  },
  computed: {
    ...mapState("CarList", ["brand", "letters", "brandCars"]),
  },
  methods: {
    ...mapActions("CarList", ["init", "getBrandCars"]),
    showPopUp(MasterID) {
      console.log(MasterID);
      this.flag = true;
      if (this.MasterID !== MasterID) {
        this.getBrandCars({ MasterID });
        this.MasterID = MasterID;
      }
    },

    // touchEnd({ touches }) {
    //   console.log("touchEnd", touches[0].pageX);
    // },
  },
};
</script>

<style lang="scss" scoped>
h5 {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: #f4f4f4;
  padding-left: 14px;
  line-height: 18px;
}

.brand {
  height: 100%;
  overflow-y: scroll;
}
.oul {
  li {
    display: flex;
    padding: 5px 0 5px 20px;
    border-bottom: 1px solid grey;
    .left {
      width: 40px;
      img {
        width: 100%;
      }
    }
    .right {
      flex: 1;
      padding-left: 20px;
      line-height: 44px;
    }
  }
}

.w90 {
  width: 90px !important;
}
.h60 {
  height: 60px;
}

</style>
